import React from 'react';
import {
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
  Button,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from '../home/Home';
import Message from '../message/Message';
import Mine from '../mine/Mine';
import Shop from '../shop/Shop';
import Toast from '../../components/widget/Toast';
// 导入集中处理相册
import {
  launchImageLibrary,
  ImagePickerResponse,
} from 'react-native-image-picker';

import icon_tab_message_selected from '../../assets/icon_tab_message_selected.png';
import icon_tab_shop_selected from '../../assets/icon_tab_shop_selected.png';
import icon_tab_mine_selected from '../../assets/icon_tab_mine_selected.png';
import icon_tab_home_selected from '../../assets/icon_tab_home_selected.png';
import icon_tab_home_normal from '../../assets/icon_tab_home_normal.png';
import icon_tab_shop_normal from '../../assets/icon_tab_shop_normal.png';
import icon_tab_message_normal from '../../assets/icon_tab_message_normal.png';
import icon_tab_mine_normal from '../../assets/icon_tab_mine_normal.png';
import icon_tab_publish from '../../assets/icon_tab_publish.png';
const BottomTab = createBottomTabNavigator();
export default () => {
  const RedBookTabBar = ({state, descriptors, navigation}: any) => {
    const {routes, index} = state;
    const onPublishPress = () => {
      // 点击后跳转系统相册
      launchImageLibrary(
        {
          mediaType: 'photo',
          quality: 1,
          includeBase64: true,
        },
        // 响应
        (res: ImagePickerResponse) => {
          const {assets} = res;
          if (!assets?.length) {
            console.log('选择图片失败');
            Toast.show('选择图片失败');
            return;
          }
          const {uri, width, height, fileName, fileSize, type} = assets[0];
          console.log(`uri=${uri}, width=${width}, height=${height}`);
          console.log(
            `fileName=${fileName}, fileSize=${fileSize}, type=${type}`,
          );
        },
      );
    };
    return (
      <View style={Styles.tabBarContainer}>
        {routes.map((route: any, i: number) => {
          const {options} = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title;
          const isFocused = index === i;
          if (i === 2) {
            return (
              <TouchableOpacity
                style={Styles.tabItem}
                key={label}
                onPress={onPublishPress}>
                <Image
                  source={icon_tab_publish}
                  style={Styles.icon_tab_publish}
                />
              </TouchableOpacity>
            );
          }
          return (
            <TouchableOpacity
              style={Styles.tabItem}
              key={label}
              onPress={() => {
                navigation.navigate(route.name);
              }}>
              <Text
                style={{
                  fontSize: isFocused ? 18 : 16,
                  color: isFocused ? '#333' : '#999',
                  fontWeight: isFocused ? 'bold' : 'normal',
                }}>
                {label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };
  return (
    <View style={Styles.root}>
      <BottomTab.Navigator
        //    传统写法   screenOptions={({ route }) => {
        //     return {
        //         tabBarIcon: ({ focused, color, size }) => {
        //             let img;
        //             if (route.name === 'Home') {
        //                 img = focused ? icon_tab_home_selected : icon_tab_home_normal;
        //             } else if (route.name === 'Shop') {
        //                 img = focused ? icon_tab_shop_selected : icon_tab_shop_normal;
        //             } else if (route.name === 'Message') {
        //                 img = focused ? icon_tab_message_selected : icon_tab_message_normal;
        //             } else if (route.name === 'Mine') {
        //                 img = focused ? icon_tab_mine_selected : icon_tab_mine_normal;
        //             }
        //             return <Image style={{
        //                 width: size, height: size, tintColor: color,
        //             }} source={img} />
        //         }
        //     }
        // }}
        // // @ts-ignore
        // tabBarOptions={{
        //     activeTintColor: '#ff2442',
        //     inactiveTintColor: '#999',
        // }}

        // **自定义tab页写法**//
        tabBar={props => <RedBookTabBar {...props} />}>
        <BottomTab.Screen
          name="Home"
          component={Home}
          options={{
            title: '首页',
            headerShown: false, // 隐藏导航栏
          }}
        />
        <BottomTab.Screen
          name="Shop"
          component={Shop}
          options={{
            title: '购物',
            headerShown: false, // 隐藏导航栏
          }}
        />
        <BottomTab.Screen
          name="Publish"
          component={Shop}
          options={{
            title: '发布',
            headerShown: false, // 隐藏导航栏
          }}
        />
        <BottomTab.Screen
          name="Message"
          component={Message}
          options={{
            title: '消息',
            headerShown: false, // 隐藏导航栏
          }}
        />
        <BottomTab.Screen
          name="Mine"
          component={Mine}
          options={{
            title: '我的',
            headerShown: false, // 隐藏导航栏
          }}
        />
      </BottomTab.Navigator>
    </View>
  );
};
const Styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  tabBarContainer: {
    width: '100%',
    height: 52,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  tabItem: {
    height: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon_tab_publish: {
    width: 58,
    height: 42,
    resizeMode: 'contain',
  },
});
